<template>
	<view class="release">
		<!-- 商品分类 -->
		<view class="type">
			<view class="type-select">
				<view>
					<view class="title">
						<text><text style="color: red;">*</text>商品总分类:</text>
					</view>
					<view class="type">
						<view class="head-box" @click="issueFlag=!issueFlag">
							<view class="show-box">
								<text class="button">{{typeVal}}</text>
								<image src="/static/imgs/myStore/select.png" class="item-img"></image>
							</view>
							<view class="item-box" v-if="issueFlag">
								<view v-for="(item,index) in cate" :key="index" @click="typeSelect(item.cateid)">
									{{item.catename}}
								</view>
							</view>
						</view>
					</view>
					<view class="info">
						<text>商品总分类内容写入分类页内容</text>
					</view>
				</view>

			</view>
			<!-- 商品图片视频 -->
			<view class="img">
				<view class="img-box">
					<text><text style="color: red;">*</text>主图</text>
					<scroll-view class="img-list" :scroll-x="true">
						<view class="list" :style="imgStyle">
							<sunuiupimg @change="getImageInfo" :upload_auto="true" :upimg_move="true" ref="upimg"></sunuiupimg>
							
						</view>
					</scroll-view>
					<view class="img-item">
						<image src="/static/imgs/myStore/img.png" @click.stop="chooseImage(0)"></image>
						<text>{{goodsImgList.length}}/8</text>
					</view>
				</view>
				<view class="video-box">
					<text><text style="color: red;">*</text>视频</text>
					<view class="video-item1" v-for="(item,index) in videoList" :key="index">
						<video class="video" :src="item" controls></video>
						<view class="remove" @click="removeVideo(index)">
							<text class="iconfont remove-img">&#xe628;</text>
						</view>
					</view>
					<view class="video-item">
						<image src="/static/imgs/myStore/video.png" @click="goodVideo"></image>
						<text>{{videoList.length}}/1</text>
					</view>
				</view>
			</view>
			<view class="goodsName">
				<text><text style="color: red;">*</text>标题</text>
				<input type="text" maxlength="20" v-model="prodesc" placeholder="限制20个字" />
			</view>
			<view class="goodsPrice">
				<text><text style="color: red;">*</text>商品价格</text>
				<view class="priceTitle">
					<text>注：系统自动折算后价格(原价*折扣)</text>
					<view class="price">
						<view>
							<text>到店价:</text>
							<input type="number" v-model="originPrice" maxlength="7" />
							<text class="RMB">元</text>
						</view>
						<view>
							<text>邻里价:</text>
							<input type="text" v-model="count" maxlength="7" disabled="true" />
							<text class="RMB">元</text>
						</view>
						<view>
							<text>折扣:</text>
							<input type="number" @blur="zkBlur()" v-model="rebate" maxlength="3" />
							<text class="RMB">折</text>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="infos">
			<text>商品简介<text style="color: red;">（必填项*）</text></text>
			<view class="box">
				<checkbox-group @change="checkboxChange">
					<view class="checkbox" v-for="item in checkList" :key="item.value">
						<text style="color: red;margin-left: -10upx;" v-if="item.isSelect">*</text>
						<label class="uni-list-cell uni-list-cell-pd">
							<checkbox style="transform:scale(0.5);" :value="item.name" :checked="item.checked" />
							{{ item.name }}
						</label>
						<input type="text" v-model="item.text" maxlength="10" />
					</view>
				</checkbox-group>
			</view>


			<view class="img mt">
				<text><text style="color: red;">*</text>产品详情介绍图</text>
				<view class="img-box">

					<scroll-view class="img-list" :scroll-x="true">
						<view class="list" :style="imgStyle">
							<sunuiupimg2 @change="getImageInfo2($event)" :upload_auto="true" :upimg_move="true" ref="upimg2"></sunuiupimg2>
						</view>
					</scroll-view>
					<view class="img-item">
						<image src="/static/imgs/myStore/img.png" @click.stop="chooseImage(2)"></image>
						<text>{{goodsImgList2.length}}/8</text>
					</view>
				</view>
			</view>
			<view class="btn" @click="onConfirm">
				<text>确认发布</text>
			</view>
		</view>
	</view>
</template>
<script>
	var _self;
	import sunuiupimg from '@/components/sunui-upimg/sunui-upimg.vue';
	import sunuiupimg2 from '@/components/sunui-upimg/sunui-upimg2.vue';
	export default {
		components: {
			sunuiupimg,
			sunuiupimg2
		},
		onLoad(option) {
			this.productId = option.productId
			this.searchFoods();
			var _self = this;
			this.getCate(1);
			this.getCate(2);
			// #ifdef APP-PLUS
			this.LL = uni.getStorageSync('lph-ll');
			// #endif
		},
		mounted() {
			this.$refs.upimg.upload_count = 8;
			this.$refs.upimg.upload_img_wh = 110;	
			
			this.$refs.upimg2.upload_count = 8;
			this.$refs.upimg2.upload_img_wh = 110;
		},
		data() {
			return {
				LL: {}, // 经纬度
				cateId: '', // 第一个分类ID
				prodesc: '', // 标题
				originPrice: '', // 原价
				rebate: '', // 折扣

				goodsImgList: [], //  主图 图片上传后的路径
				goodsImgList2: [], // 产品详情 上传后的路径

				videoList: [], // 视频二进制列表
				videoUrls: [], // 视频上传到服务器后的地址

				shopFlag: false,
				typeVal: '请选择',
				shopTypeVal: '请选择',
				issueFlag: false,
				current: -1,
				otherCurrent: -1,
				ischecked: false,
				// checkList: [{
				// 		name: '品牌：',
				// 		checked: false,
				// 		text: ''
				// 	},
				// 	{
				// 		checked: false,
				// 		name: '规格：',
				// 		text: ''
				// 	},
				// 	{
				// 		checked: false,
				// 		name: '产地：',
				// 		text: ''
				// 	},
				// 	{
				// 		checked: false,
				// 		name: '库存：',
				// 		text: ''
				// 	},
				// 	{
				// 		checked: false,
				// 		name: '可配送小区：',
				// 		text: ''
				// 	},
				// 	{
				// 		checked: false,
				// 		name: '特卖数量：',
				// 		text: ''
				// 	},
				// 	{
				// 		checked: false,
				// 		name: '面料/质地/成分：',
				// 		text: ''
				// 	},
				// 	{
				// 		checked: false,
				// 		name: '其他：',
				// 		text: ''
				// 	}
				// ],
				checkList: [
					{name: '品牌：',isSelect:1, checked: false, text: ''},
					{name: '商品名称：', isSelect:2, checked: false, text: ''},
					{name: '商品编号：', checked: false, text: ''},
					{checked: false, name: '规格/单位：', isSelect:3, text: ''},
					{checked: false, name: '产地：', text: ''},
					{checked: false, name: '库存：', isSelect:4, text: ''},
					{checked: false, name: '可配送小区：', text: ''},
					{checked: false, name: '特卖数量：', isSelect:5, text: ''},
					{checked: false, name: '面料/质地/成分：', text: ''},
					{checked: false, name: '其他：', text: ''}
				],
				cate: [], // 分类ID
				priceCate: [],
				productId: '', // 商品ID
			}
		},
		computed: {
			count() { // 折扣后的价格
				let a = this.originPrice * (this.rebate * 0.1);
				// return this.$common.formatMoney(a);
				return a;
			}
		},
		methods: {
			async searchFoods() { // 查询商品
				if (this.productId) {
					let a = await this.$http.searchFoods({
						productId: this.productId
					});
					if (a.code == 200) {	
						this.cateId = a.data['procate']
						this.prodesc = a.data['proname']
						this.count = a.data['nowprice']
						this.originPrice = a.data['preprice']
						this.rebate = a.data['discount']
						this.LL.longitude = a.data['lng']
						this.LL.latitude = a.data['lat']
						this.goodsImgList = a.data['proimgs']
						this.goodsImgList2 = a.data['product_detail_imgs']
						this.videoList = a.data['video']
						this.checkList = a.data['brief']
						
						this.$nextTick(function(){ // 图片的双向数据绑定
							let aa = [];
							this.goodsImgList.forEach((item) => {
								aa.push({path: item})
							})
							this.$refs.upimg.upload_before_list = aa;
							let bb = [];
							this.goodsImgList2.forEach((item) => {
								bb.push({path: item})
							})
							this.$refs.upimg2.upload_before_list = bb;
							setTimeout(() => {
								this.typeSelect(this.cateId);
							},700)
							
						})
						return
					}
					uni.showToast({
						title: a.message,
						icon: 'none'
					})
				}
			},

			checkboxChange(e) { // 商品简介框的点击
				let items = this.checkList;
				let values = e.detail.value;
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.name)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},
			async onConfirm() { // 确认发布
				let val = {
					procate: this.cateId,
					proname: this.prodesc,
					nowprice: this.count,
					preprice: this.originPrice,
					discount: this.rebate,
					lng: this.LL.longitude || '',
					lat: this.LL.latitude || '',
					proimgs: this.goodsImgList,
					product_detail_imgs: this.goodsImgList2,
					video: this.videoUrls,
					brief: this.checkList,
					productId: this.productId
				}
				let a ;
				if(this.productId) {
					a =	await this.$http.prodectEdit(val);
				} else{
					a = await this.$http.localSpecialty(val);
				}
				
				console.log(a);
				if (a.code == 200) {
					uni.showToast({
						title: a.message
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/myStore/myStore'
						})
					}, 500);
					return
				}
				uni.showToast({
					title: a.message,
					icon: 'none'
				})
			},
			zkBlur() { // 折扣输入框的处理
				if(this.rebate.length != 0) {
					if(Number(this.rebate) <= 0 || Number(this.rebate) >= 10) {
						uni.showToast({
							title: '折扣不合理，请重新输入~~',
							icon: 'none'
						})
						this.rebate = ''
					}
				}
			},
			
			uploadImg() { // 先上传图片 -- 暂时废弃
				if (this.goodsImgList.length <= 0 || this.videoList.length <= 0) {
					uni.showToast({
						title: '请添加图片或视频后再提交',
						icon: 'none'
					})
					return
				};
				this.goodsImgList.forEach((item) => { //循环上传图片
					uni.uploadFile({
						url: `http://192.168.2.201/shop/uploads/setUploadImg`,
						filePath: item,
						name: 'file',
						success: (res) => {
							if (res.statusCode !== 200) {
								this.imgUrls = []
								return
							}
							res = JSON.parse(res.data)
							if (res.code == 200) {
								this.imgUrls.push(res.data.file)
								console.log(this.imgUrls)
							}
						}
					});
				});

				uni.uploadFile({ //上传视频
					url: this.$commom.baseUrl.setUploadImg,
					filePath: this.videoList[0],
					name: 'file',
					success: (res) => {
						if (res.statusCode !== 200) {
							this.videoUrls = []
							return
						}
						res = JSON.parse(res.data)
						if (res.code == 200) {
							this.videoUrls.push(res.data.file)
							console.log(this.videoUrls)
						}
					}
				});
			},

			async getCate(cateId) { //获取分类的
				let a = await this.$http.getTypeCate({
					type: cateId
				})
				if (cateId == 1) {
					this.priceCate = a.data
					return
				}
				this.cate = a.data // 1 商品总分类
			},

			navTo(url) { // nav路由跳转
				uni.navigateTo({
					url: url
				})
			},

			typeSelect(cateid) { //分类1的选择
				this.cate.forEach((item) => {
					if(item.cateid == cateid) {
						this.typeVal = item.catename;
						this.cateId = cateid
						return
					}
				})
			},
			shopTypeSelect(cateid, catename) { // 分类2的选择
				this.shopTypeVal = catename;
				// this.cate.forEach((item) => {
				// 	if(cateid == item.id) {
				// 		this.shopTypeVal = item.catename
				// 	}
				// })
				this.goods['procate'] = cateid;
				console.log(this.goods)
			},

			imgStyle() {
				return this.goodsImgList.length * 112 + 'upx'
			},

			removeVideo(index) { // 移除视频
				this.videoList.splice(index, 1)
			},
			goodVideo() { //选择视频
				if (this.videoList.length >= 1) {
					uni.showToast({
						title: '你已经添加过了',
						icon: 'none'
					})
					return
				};
				var _self = this;
				console.log(_self.$common.baseUrl.setUploadImg);
				uni.chooseVideo({
					count: 1,
					sourceType: ['album'],
					success: function(res1) {
						_self.videoList.push(res1.tempFilePath);
						uni.uploadFile({ //上传视频
							url: _self.$common.baseUrl.setUploadImg,
							filePath: res1.tempFilePath,
							name: 'file',
							success: (res) => {
								if (res.statusCode !== 200) {
									_self.videoUrls = []
									return
								}
								res = JSON.parse(res.data)
								if (res.code == 200) {
									_self.videoUrls.push(res.data.file)
									console.log(_self.videoUrls)
								}
							}
						});
					}
				});
			},

			goodsImg() { //上传图片--废弃
				if (this.goodsImgList.length >= 8) {
					uni.showToast({
						title: '最多只能添加8张',
						icon: 'none'
					})
					return
				};
				uni.chooseImage({
					count: 8, //限制1张图片
					sizeType: ['compressed'], //压缩图
					sourceType: ['album'], //从相册选择
					success: res => {
						console.log(res.tempFilePaths[0])
						this.goodsImgList = this.goodsImgList.concat(res.tempFilePaths)
					},

				});
			},
			sendChange() { // 暂时没用
				if (this.ischecked == false) {
					this.ischecked = true
				} else {
					this.ischecked = false
				}
			},

			chooseImage(val) { // 选择图片
				if (val == 0) {
					if (this.goodsImgList.length >= 8) {
						uni.showToast({
							title: '最多只能添加8张',
							icon: 'none'
						})
						return;
					};
					this.$refs.upimg.chooseImage();
				} else {
					if (this.goodsImgList2.length >= 8) {
						uni.showToast({
							title: '最多只能添加8张',
							icon: 'none'
						})
						return;
					};
					this.$refs.upimg2.chooseImage();
				}
			},
			getImageInfo(e) { //获取上传后的url，发生改变时候触发
				this.goodsImgList = e;
			},
			getImageInfo2(e) { //获取上传后的url，发生改变时候触发
				this.goodsImgList2 = e;
			},
		},
	}
</script>
<style lang="scss" scoped>
	@import 'static/css/myStore.scss';
</style>
